<template>
  <div class="w-full h-full p-3 rounded-xl border-slate-200 bg-white">
    <div class="flex items-center  content-center  mb-2">
      <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
        <span class="title font-semibold text-indigo-600 ml-1.5">{{ $t('inventoryInforSummary.inboundDataOne') }}</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
      <el-form :inline="true" :model="from" class="align-center search-form" style="margin-bottom: 10px">
        <el-form-item class="label" :label="$t('iot.time')">
          <el-date-picker
            style="width: 220px" v-model="from.time" type="daterange"
            range-separator="-" :start-placeholder="$t('wms.startTime')" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            :end-placeholder="$t('wms.endTime')" class="custom-date-picker"/>
        </el-form-item>
        <el-button icon="Search" class="buttons" size="small" type="primary" @click="getSerch" style="margin-top: 3px">
          {{ $t('wms.search') }}
        </el-button>
      </el-form>
    </div>
    <div class="w-full flex items-center mt-4" style="height: 88%;text-align: center">
      <div class="w-full h-full" style="border-radius: 16px;">
        <v-chart v-if="list.length" ref="currentRef" :option="optionPie"/>
        <el-empty v-else :description="$t('mes.noDataYet')"/>
      </div>
    </div>
  </div>
</template>
<script setup>
import '@/assets/font/iconfont.css'
import { onMounted, reactive, ref } from 'vue'
import { onDayAndWeekIn } from '@/api/generalViewApi'
import * as echarts from 'echarts'
import moment from 'moment/moment'
import useI18n from '@/hooks/language'

const { t } = useI18n()
const currentRef = ref()
const optionPie = ref(null)
const list = ref([])
const from = reactive({
  time: [],
})

onMounted(async () => {
  await getDefaultDateRange()
  await listWeekPie()
  if (currentRef.value) {
    currentRef.value.setOption(renderPieOptions())
  } else {
    setTimeout(() => {
      if (currentRef.value) {
        currentRef.value.setOption(renderPieOptions())
      }
    }, 100)
  }
})
const listWeekPie = async () => {
  await  onDayAndWeekIn({
    startTime: from.time[0],
    endTime: from.time[1]
  }).then(res => {
    if (res.code == 0) {
      list.value = [
        { value: res.data.instockBarcodeQty, name: t('inventoryInforSummary.barcodesEntry') },
        { value: res.data.instockOrderQty, name: t('inventoryInforSummary.warehouseEntry') },
        { value: res.data.materialCount, name: t('mes.totalNumberOfItems') },
      ]
    }
  })
}

const renderPieOptions = () => {
  return {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      position: 'top',
      top: '1%',
      data: list.value //这里的渲染的数据需要与series里面渲染的数据中的name保持一致
    },
    series: [
      {
        name: t('common.archivedDatIn'),
        type: 'pie',
        radius: ['40%', '75%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: true, // 显示标签
          position: 'outside', // 标签位置为外部
          color: '#37886c',
          fontSize: 16,
          formatter: '{b}: {c}' // 标签内容格式
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: list.value
      }
    ]
  }
}

const getDefaultDateRange = () => {
  const start = moment().subtract(7, 'days').format('YYYY-MM-DD')// 本月一号
  const end = moment().format('YYYY-MM-DD') // 今天
  from.time = [start, end]
}



const getSerch = async () => {
  await  listWeekPie()
  if (currentRef.value) {
    currentRef.value.setOption(renderPieOptions())
  } else {
    setTimeout(() => {
      if (currentRef.value) {
      }
    }, 100)
  }
}
</script>

<style scoped lang="scss">
:deep(.el-form) {
  height: 18px;
  display: flex;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1; /* 完全可见 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}

.dynamic-text {
  font-size: 38px;
  font-weight: bold;
  background: linear-gradient(270deg, #120101, #01350b, #162c02);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite, blink 1s infinite; /* 应用渐变和闪烁动画 */
}

.card-box, .card-box2 {
  background-image: url("@/assets/images/bgcard.png");
  background-size: cover; /* 使背景图像覆盖整个元素 */
  background-position: center; /* 使背景图像居中 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  padding-left: 30px;
  padding-top: 30px;
}

.card-box2 {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 26px;
}

.text-box {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 15px;
}
</style>
